<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .canvas {
        background-color: #eee;
      }
    </style>
  </head>
  <body>
    <canvas class="canvas" id="charts" width="1000" height="800"></canvas>
    <script>
      const canvas = document.getElementById("charts");
      const context = canvas.getContext("2d");

      context.strokeStyle = "pink";
      context.moveTo(0, 0);
      context.lineTo(100, 100);
      context.lineTo(200, 100);
      context.lineTo(200, 300);
      context.stroke();

      // 画矩形
      // context.strokeStyle = "darkred";
      context.fillStyle = "pink";
      context.fillRect(400, 100, 200, 100);
      context.fillStyle = "pink";
      context.fillRect(400, 250, 200, 100);

      // 画圆
      // arc(x, y, radius, starAngle, endAngle, anticlockwise)
      // x : 圆心的 x 坐标;y：圆心的 y 坐标; radius ： 半径 ;starAngle ：开始角度 ;endAngle：结束角度 ;anticlockwise ：是否逆时针（true）为逆时针，(false)为顺时针
      context.beginPath();
      context.arc(300, 225, 100, 0, Math.PI * 2, true);
      context.closePath();
      context.fillStyle = "pink";
      context.fill();

      context.beginPath();
      context.arc(700, 225, 100, 0, Math.PI * 2, true);
      context.closePath();
      context.fillStyle = "pink";
      context.fill();

      // 画文字
      context.font = "40px 宋体";
      context.fillText("你好，靓仔", 400, 60);

      // 清除画布
      // context.clearRect(0, 0, 1000, 800);
    </script>
  </body>
</html>
